import React, { memo } from "react";
import { Form, Button, Input, TimePicker, Table } from "antd";
import { EditableProTable, ActionType } from "@ant-design/pro-components";

export default function Fault() {
  type FieldType = {
    type?: string;
    time?: string;
    reason?: string;
  };

  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  interface DataType {
    key: string;
    id: number;
    type: string;
    reason: string;
    time: string;
  }

  const dataSource = [
    {
      key: "1",
      id: 1,
      type: "惯导",
      reason: "惯导故障",
      time: "2024-06-01 12: 00: 00",
    },
    {
      key: "2",
      id: 2,
      type: "RTK模块",
      reason: "RTK模块故障",
      time: "2024-06-01 12: 00: 00",
    },
    {
      key: "3",
      id: 3,
      type: "底盘",
      reason: "底盘故障",
      time: "2024-06-01 12: 00: 00",
    },
  ];

  const columns = [
    {
      title: "编号",
      dataIndex: "id",
    },
    {
      title: "故障类型",
      dataIndex: "type",
    },
    {
      title: "故障原因",
      dataIndex: "reason",
    },
    {
      title: "时间",
      dataIndex: "time",
    },
  ];

  return (
    <>
      <Form
        name="basic"
        style={{ maxWidth: "none" }}
        layout="inline"
        autoComplete="off"
        form={form}
        onFinish={onFinish}
        className="grid grid-cols-6 gap-4 my-8"
      >
        <Form.Item<FieldType> name="type">
          <Input placeholder="故障类型" />
        </Form.Item>

        <Form.Item<FieldType> name="time">
          <TimePicker.RangePicker />
        </Form.Item>

        <Form.Item<FieldType> name="reason" className="col-span-3">
          <Input placeholder="故障原因" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>

      <EditableProTable
        className="size-full"
        size="middle"
        rowKey="id"
        recordCreatorProps={false}
        columns={columns}
        value={dataSource}
      />
    </>
  );
}
